import { VerticalBox , HorizontalBox, Button } from "std-widgets.slint";
import { TabContainer } from "tabcontainer.slint";
import { TimerConfig } from "timerconfig.slint";
import { Theme, Settings } from "globals.slint";

export component SlideOver {
    in-out property<bool> expanded;
    in-out property<image> logo <=> tc.logo;

    out property <TimerConfig> tmr-config: tc.tmr-config;
    out property<length> cont-x;

    animate cont-x {
        duration: 250ms;
        easing: ease-in-out;
    }

    states [
        vis when root.expanded : {
            cont-x: 0px;
        }
        not-vis when !root.expanded: {
            cont-x: self.width * -1;
        }
    ]

    horizontal-stretch: 0;
    Rectangle {
        y: 0px;
        x: root.cont-x;
        height: 100%;
        width: 100%;

        i-content := Rectangle {
            background: Theme.background-light;
            clip: true;

            tc := TabContainer {}
        }
    }
}